<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>岭南醒狮之旅</title>
		<style>
			html,
			body {
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
			}
			
			.container {
				max-width: 98%;
				position: relative;
				margin: 0 auto;
				text-align: center;
				height: 100vh;
				/*将容器高度设置为浏览器视窗高度的100%*/
				overflow: hidden;
			}
			
			.bg {
				position: relative;
				margin: auto;
				width: fit-content;
				overflow: hidden;
			}
			
			.bgimg {
				max-width: 100%;
				/*最大宽度为100%*/
				max-height: 100%;
				/*最大高度为100%*/
				height: 100vh;
			}
			.shizi {
				position: absolute;
    			width: 39%;
    			left: 30%;
    			transform: translate(-50%, 0);
    			bottom: 18%;
    			z-index: 4;
			}
			
			.yinfu {
				position: absolute;
				width: 30%;
				left: 72%;
				transform: translate(-50%, 0);
				bottom: 58%;
				z-index: 3;
			}
			#dong {
				position: absolute;
				width: 48%;
				left: 30%;
				transform: translate(-50%, 0%);
				bottom: 15.5%;
				z-index: 3;
				animation: guang 1s linear infinite;
			}
			#fu {
				position: absolute;
				width: 39%;
				left: 33%;
				transform: translate(-50%, 0%);
				bottom: 58%;
				z-index: 3;
				animation: guang 1s linear infinite;
			}
			#yue {
				position: absolute;
				width: 35%;
				left: 72%;
				transform: translate(-50%, 0%);
				bottom: 56%;
				z-index: 2;
				animation: guang 1s linear infinite;
			}
			@keyframes guang {
				25%{opacity: 0.5;}
				50%{opacity: 0.1;}
				75%{opacity: 0.5;}
				100%{opacity: 0.9;}
		</style>
	</head>

	<body>
		<div class="container">
			<div class="bg">
				<img class="bgimg" src="res/huang.png" />
				<img class="shizi" src="res/shizi.png" />
		        <img class="yinfu" src="res/yinfu.png" /> 
		        <img id="dong" src="res/dong.png" />
		        <img id="fu" src="res/fu.png" />
		        <img id="yue" src="res/yue.png" />
			</div>
		</div>
	</body>

</html>